<template>
  <div class="contBody">
    <h2 class="title">视图联动</h2>
    <div class="container">
      <lable>主视图</lable>
      <div id="mainMap" class="map"></div>
    </div>
    <div class="container">
      <lable>辅视图</lable>
      <div id="minorMap" class="map"></div>
    </div>
  </div>
</template>

<script>
import { Map, View } from "ol"; // 地图实例方法、视图方法
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import XYZ from "ol/source/XYZ"; // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import "ol/ol.css"; // 地图样式

export default {
  name: "MapPage",
  data() {
    return {
      map: null,
      view: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 地图实例
      this.map = new Map({
        target: "mainMap", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          new Tile({
            title: "天地图矢量图层",
            source: new XYZ({
              url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=200d3f62135e4debe4f843220883e31d",
              wrapX: false,
            }),
          }),
          new Tile({
            title: "天地图矢量图层注记",
            source: new XYZ({
              url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=200d3f62135e4debe4f843220883e31d",
              wrapX: false,
            }),
          }),
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326",
          center: [116.41, 39.9], // 北京坐标
          minZoom: 5,
          zoom: 6,
        }),
      });
      this.view = new Map({
        layers: [
          new Tile({
            title: "天地图矢量图层",
            source: new XYZ({
              url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=200d3f62135e4debe4f843220883e31d",
              crossOrigin: "anonymous",
              wrapX: false,
            }),
          }),
          new Tile({
            title: "天地图矢量图层注记",
            source: new XYZ({
              url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=200d3f62135e4debe4f843220883e31d",
              crossOrigin: "anonymous",
              wrapX: false,
            }),
          }),
        ],
        target: "minorMap", //地图容器div的ID
        view: this.map.getView(), //设置为主图的视图对象
      });
    },
  },
};
</script>

<style lang="css" scoped>
.contBody .title {
  padding: 0 0 24px;
}
.map__x {
  width: 100%;
  height: 600px;
  border: 1px solid #eee;

  background: rgba(0, 0, 0, 1);
}

.container {
  display: inline-block;
  width: 48%;
  height: 600px; /*600px;*/
  padding: 10px;
}

.map {
  display: inline-block;
  background: #f8f4f0;
  width: 100%;
  height: 95%;
  border: 1px dashed #000;
}
</style>
